<template>
	<BpmComponent :processInstanceId="processInstanceId">
		<template #approval-info>
			<up-form labelPosition="left" labelWidth="120">
				<up-form-item v-for="field in formFields" :key="field.prop" :label="field.label" borderBottom>
					{{ field.format ? field.format(formData[field.prop]) : formData[field.prop] || '无' }}
				</up-form-item>
			</up-form>
		</template>
	</BpmComponent>
</template>

<script setup lang="ts">
	import { onLoad } from "@dcloudio/uni-app";
	import { ref, unref, reactive, nextTick, getCurrentInstance } from 'vue'
	import BpmComponent from '@/components/processInstance/detail/index.vue'
	import { SafetyAdvancedIndividualAppApi, SafetyAdvancedIndividualAppVO } from '@/api/safety/safeproduction/safetyadvancedindividualapp'


	const processInstanceId = ref(null)// 流程实例的编号
	const detailId = ref(null)
	const formData = ref<SafetyAdvancedIndividualAppVO>({} as any)
	const formFields = [
		{ prop: 'name', label: '姓名' },
		{
			prop: 'gender', label: '性别',
			format: (val : any) => {
				return val === 0 ? '男' : '女'
			}
		},
		{ prop: 'age', label: '年龄', placeholder: '请输入年龄' },
		{ prop: 'ethnicity', label: '民族' },
		{ prop: 'education', label: '文化程度' },
		{ prop: 'position', label: '职务或岗位' },
		{ prop: 'title', label: '职称' },
		{ prop: 'politicalAffiliation', label: '政治面貌' },
		{ prop: 'mainAchievements', label: '主要事迹' },
		{ prop: 'reportingUnit', label: '填报单位' },
		{ prop: 'applicationDate', label: '时间' },
	] as any
	/** 获取页面详情 */
	const getDetailById = async () => {
		try {
			const data = await SafetyAdvancedIndividualAppApi.getSafetyAdvancedIndividualApp(Number(detailId.value))
			formData.value = data
		} catch (error) {
			console.log('加载数据失败')
		}
	}
	onLoad(async (options) => {
		processInstanceId.value = options?.processInstanceId
		detailId.value = options?.id
		/** 获得详情 */
		getDetailById()
	})
</script>

<style>
	/* 样式 */
	.uv-node {
		height: 34rpx;
		width: 34rpx;
		border-radius: 50%;
		background-color: #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		flex-shrink: 0;
		z-index: -1;
	}

	.audit-node {
		margin: 5px 0;
	}
</style>